import React from 'react';
import { toJS } from 'mobx'
import { observer, inject } from 'mobx-react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import { renderLoading, renderNoData } from '../public/BlogUtils';
import { Icon, Tools, SearchBar, List, Picker, Popover, Avatar, Flex, Modal,Tabs,Result, WhiteSpace, Badge  } from 'weaver-mobile';
import { SearchAdvanced, TabPage,TreePage,ListViewPage } from 'weaver-mobile-page';
import BlogComment from '../public/BlogComment';
import HisBlogRoute from '../hisBlog/HisBlogRoute';
import AttentionTool from '../public/AttentionTool';
import NewAttentionTool from '../public/NewAttentionTool'
const Tree = TreePage.Normal;
const getLabel = Tools.getLabel;

/* 微博主页 */

@withRouter
@inject('blogMainStore','blogAttentionStore','blogHomeStore','userCenterStore','organizationStore')
@observer
export default class BlogMain extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-main'
  }

  constructor(props) {
    super(props);
    this.state = {
      id: '',
      isChangeTabs:1,
      currentIndex:0,
      params: {
        url: '/api/hrm/base/getHrmSearchTree',
        params: { isLoadUser: 1 },
      },
      path: "../hisBlog/",
      page:0,
      userId:''
   
    } 

   
    this.isAllSerach = false;
    this.isSerachParams={isSerach:false,groupId:'all'};
    this.observeBlog = null;
    if(this.props.location.isNoParams){
      this.resetForm();
    }
    this.updateUserAttentionStatus = this.updateUserAttentionStatus.bind(this);
  }

  componentDidMount() {
    const { blogAttentionStore: { initalMyOrganization } } = this.props;
    initalMyOrganization();
    const { blogMainStore: { blogSearchCondition } } = this.props;
    blogSearchCondition('homepage');
    const { userCenterStore } = this.props;
    //userCenterStore.initData();
    this.props.blogHomeStore.setState({hidden: false});
    const { treeStore } = this.props.organizationStore;
    // 通过请求参数params来获取数据，并设置tree-page类别为2
    treeStore.getData(this.state.params, 2);
    if("4"==localStorage.getItem("blogMainTab")){
        this.setState({page:4})
    }
    //localStorage.setItem("blogMainTab", "0");

    // console.log('BlogMain-------componentDidMount----');
  }

  componentDidUpdate(){
    // console.log('BlogMain-------componentDidUpdate----');
    this.readBlog();
	
    //this.props.blogHomeStore.setState({hidden: false});
  }



  componentWillReceiveProps(nextProps) {
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
    if(prePath === '/blogMain' && curPath === '/blogMain/blog'){
      nextProps.blogMainStore.initCondition();
    }
    if(prePath === '/blogMain' && curPath === '/blogMain/shareToMe'){
      nextProps.blogMainStore.initCondition();
    }


    // console.log('BlogMain-------componentWillReceiveProps----',this.props.location.pathname,nextProps.location.pathname);
  }

  componentWillUnmount() {
    // console.log('BlogMain-------componentWillUnmount----');
    const { blogMainStore: { initCondition } } = this.props;
    initCondition()
    if(this.observeBlog){
     // this.observeBlog.disconnect(); // 关闭观察器
    }
    
  }

  handleSelect = (key, data, level) => {
    this.props.history.push(`/myBlog/atMe/hisBlog/${data.id}`)
  }

  readBlog = () => {
    setTimeout(() => {
      try {
        let blogMain = document.getElementsByClassName("blog-main")[0];
        let container = blogMain.getElementsByClassName("wm-comment-list-container");
        let options = {
          root: blogMain,
          threshold: [0.05, 0.1, 0.25, 0.5, 0.75, 1]
        }
        this.observeBlog = new IntersectionObserver(this.__observer, options);
        if (container) {
          for (let i=0;i<container.length;i++) {
            if(container[i].getElementsByClassName("blog-comment-right-top")[0].title == 0){
              this.observeBlog.observe(container[i]);
            }
          }
        }
      } catch (error) {
        console.log('error', error);
      }
    },1000);
  }

  __observer = (changes) => {
    for (const change of changes) {
      /* 
      **目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
      **change.intersectionRatio
      **目标元素与视口（或根元素）的交叉区域的信息
      **change.intersectionRect
      */
      //console.log('change.intersectionRatio', change.intersectionRatio,change.intersectionRect.height);
      if(change.intersectionRatio > 0.15 || change.intersectionRect.height > 35){
        this.setBlogReaded(change.target);
        this.observeBlog.unobserve(change.target);
      }
    }
  }

  setBlogReaded = (target) => {
    let rightTop = target.getElementsByClassName("blog-comment-right-top")[0];
    if(rightTop.title == 1){
      return;
    }
    let params={
      blogId: target.getElementsByClassName("wm-comment-head")[0].id,
      discussId: target.getElementsByClassName("wm-comment")[0].id,
    }
    const { blogMainStore: { setBlogReaded } } = this.props;

    target.getElementsByClassName("blog-comment-right-top-unread")[0].innerHTML="";
    rightTop.title = 1;
    setBlogReaded(params);

    this.updateUnreadCount();
  }

  updateUnreadCount = () => {
    const { userCenterStore: {setMenuCountData, menuCountData  } } = this.props;
    setMenuCountData({updateCount: menuCountData.updateCount-1 < 0 ? 0 : menuCountData.updateCount-1});
  }

  // 点击tab页切换
  changeTab = (tab,index) => {
    const {blogMainStore: {blogSearchCondition,searchBlog,searchShareToMeBlog,setStoreState,search,searchSpecailBlog,searchAllBlogBlog}} = this.props;
    setStoreState({ searchAdValue: '' });
    search.form.resetFields();
    switch(index) {
      case 0:blogSearchCondition('homepage');this.setState({page:0}); break;
      case 1:blogSearchCondition('unreadPage');this.setState({page:1}); break;
      case 2:blogSearchCondition('-5');this.setState({page:2});break;
      case 3:blogSearchCondition('shareToMePage'); this.setState({page:3}); break;
      case 4:const {blogAttentionStore: {setStoreState}} = this.props;setStoreState({MyOrganizationIsSearch:false,overviewOrgAdValue:''}); this.setState({page:4}); break;
      case 5: blogSearchCondition('0');this.setState({page:5}); break;
      default: return;
    }
   ;
   if(Math.abs(index-this.state.page)!=1&&this.isSerachParams.isSerach){
    switch(this.isSerachParams.groupId) {
      case 'all':searchBlog();break;
      case 'shareToMe':searchShareToMeBlog();; break;
      case '-5':searchSpecailBlog();;break;
      case '0':searchAllBlogBlog();break;
      default:searchBlog(); return;
    }
   }
   if(index==4){
       localStorage.setItem("blogMainTab", "4")
   }else{
       localStorage.removeItem("blogMainTab");
   }
    this.isSerachParams.isSerach =false;
    setStoreState({isTabs:true});
    this.isAllSerach = false;
    //this.setState({currentIndex:index});
  }



  resetForm(){
    const { blogMainStore: {setIsNoParamsAction } } = this.props;
    setIsNoParamsAction("1");
  }

  searchInput(){
    const { blogMainStore: { search,updateAdSearchSubject, searchBlog,searchShareToMeBlog,searchSpecailBlog,searchAllBlogBlog, searchAdValue, setStoreState }, history, prefixCls } = this.props;
    let params = search.form.formParams || {};
    this.isSerachParams.isSerach=true;
    this.isSerachParams.groupId=params.groupId;
  
    if(params.groupId=="all"){
      searchBlog();
    }else if(params.groupId=="shareToMe"){
      searchShareToMeBlog();
    }else if(params.groupId=="-5"){
      searchSpecailBlog();
    }else if(params.groupId=="0"){
      searchAllBlogBlog();
    }else {
      searchBlog();
    }
  }


  searchAdvancedInput(index,newIndex){
    const { blogMainStore: { search,updateAdSearchSubject, searchBlog,searchShareToMeBlog,searchSpecailBlog,searchAllBlogBlog, searchAdValue, setStoreState }, history, prefixCls } = this.props;
    let conditions = toJS(search.conditions);
    if(Math.abs(index-newIndex)!=1&&Math.abs(index-newIndex)!=0){
      search.form.formParams.content='';
      search.form.formParams.blogUserId=''
      search.form.formParams.blogUserIdspan=''
      search.form.formParams.deptId=''
      search.form.formParams.deptIdspan=''
      search.form.formParams.subId=''
      search.form.formParams.subIdspan=''
      search.form.formParams.startDate= conditions[0].items[5].value[0];
      search.form.formParams.endDate= conditions[0].items[5].value[1];
      switch(index) {
        case 0:searchBlog();break;
        case 2:searchSpecailBlog();break;
        case 3:searchShareToMeBlog();break;
        case 5: searchAllBlogBlog(); break;
        default: searchBlog();return;
      }
    }
  }




  getSearchBar = () => {
    const { blogMainStore: { search,updateAdSearchSubject, searchBlog,searchShareToMeBlog,searchSpecailBlog,searchAllBlogBlog, searchAdValue, setStoreState }, history, prefixCls } = this.props;
       return <div>
       <SearchBar 
          value={searchAdValue}
          placeholder={getLabel(500351,'请输入关键字')} 
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key='filter-o' type='filter-o' /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(search.path)}
          onChange={val => updateAdSearchSubject(val)}
          onSubmit={() => this.searchInput()}
        />
        <SearchAdvanced
          store={search}
          onChange={(condition, value) => {
            if(condition.domkey[0] === 'content') { 
              setStoreState({ searchAdValue: value }); 
            }
          }}
          buttonGroupData={[
            { key: 'reset',
              text: getLabel(2022,"重置"),
              onClick: () => {
                setStoreState({ searchAdValue: '' });
                search.form.resetFields();
              }
            },
            { key: 'submit',
              text: getLabel(826,"确定"),
              onClick: () => {
                let params = search.form.formParams || {};
                this.isSerachParams.isSerach=true;
                this.isSerachParams.groupId=params.groupId;
                let oldPage = this.state.page;
               
                if(params.groupId=="all"){
                  //blogSearchCondition('homepage',params);
                  searchBlog();
                  history.push("/blogMain/blog");
                  this.isAllSerach = false;
                  this.setState({page:0});
                  this.searchAdvancedInput(oldPage,0);
                }else if(params.groupId=="unread"){
                  //blogSearchCondition('homepage',params);
                  //history.push("/blogMain/unread");
                  this.isAllSerach = false;
                  this.setState({page:1});
                }else if(params.groupId=="shareToMe"){
                  //blogSearchCondition('shareToMePage',params);
                  searchShareToMeBlog();
                  
                  history.push("/blogMain/shareToMe");
                  this.isAllSerach = false;
                  this.setState({page:3});
                  this.searchAdvancedInput(oldPage,3);
                }else if(params.groupId=="0"){
                 // blogSearchCondition('0',params);
                 searchAllBlogBlog();
                 history.push("/blogMain/allBlog");
                 this.isAllSerach = true;
                 this.setState({page:5});
                 this.searchAdvancedInput(oldPage,5);
                }else if(params.groupId=="-5"){
                    searchSpecailBlog();
                    this.isAllSerach = false;
                    history.push("/blogMain/specialBlog");
                    this.setState({page:2});
                    this.searchAdvancedInput(oldPage,2);
                } else{
                  //blogSearchCondition('homepage',params);
                 // history.push("/blogMain/blog");
                  searchBlog();
                  this.isAllSerach = false;
                  this.setState({page:0});
                }
                
                setStoreState({isTabs:true});
              },
              type: 'primary',
            }
          ]} 
        />
        </div>
   }


   getSearchUser = () => {
  
    const { blogAttentionStore: { search,updateSearchSubject, searchAdValue,myOrganizationSearch,overviewOrgAdValue,setStoreState },history} = this.props;
       return <div>
       {/* <SearchBar 
          value={searchAdValue}
          placeholder={getLabel(500351,'请输入关键字')} 
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key='filter-o' type='filter-o' /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(search.path)}
          onChange={val => updateAdSearchSubject(val)}
          onSubmit={searchBlog}
        /> */}


        <SearchBar
          value={overviewOrgAdValue}
          placeholder = {getLabel(500351,'请输入关键字')} 
          onChange={val => updateSearchSubject(val)}
          onSubmit={value => {
              this.setState({page:4});
              setStoreState({myAttentionLoading: false,MyOrganizationIsSearch:true})
              myOrganizationSearch(value);
             
          }}
        />
        </div>
   }

  renderBlog = () => {
    const { blogMainStore: { photoSwipePage }, prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-main`} style={{top:'0px'}} key='all'>
        {this.getSearchBar()}
        <div className={`${prefixCls}-main-container`}>
          <BlogComment 
            path="/blogMain/blog" 
            id="writeBlog" 
            replyClassName=""
            replyStore={this.props.blogMainStore} 
            storeName='blog' 
            photoSwipePage={photoSwipePage}
            avatarClick={(data)=>this.setState({id: data.id},()=>{
              this.props.history.push(`/blogMain/blog/hisBlog/${data.id}`)
            })}
          />
        </div>
      </div>
    )
  }

  


choseTab = (tab, index) => {
  let { blogAttentionStore: {changeMyGroup,initalMyOrganizationList }} = this.props;
  if(index==0){
      changeMyGroup({groupId:'all'})
  this.setState({groupName: getLabel(384389, '全部关注'),page:0})
  //initalMyOrganizationList({groupId:'all'})
  }else{
      this.setState({page:1})
  changeMyGroup({groupId:'special'})
  //initalMyOrganizationList({groupId:'all'})
  }
}
goToUser = (userid) => {
  this.setState({ userId: userid }, () => {
      this.props.history.push(this.state.path + userid);
  });
}

  // 我的关注--更改关注状态
  updateUserAttentionStatus(attnInfo) {
    const { blogAttentionStore: { updateUserOrganizationStatus } } = this.props;
    updateUserOrganizationStatus(attnInfo);
  }



/* 我的关注页面 */
pickerContent = () => {
  const { prefixCls, blogAttentionStore: { groupData,isSpecial, MyAttentionIsSearch, myorganizationList, showChecked, myAttentionSelectAll, myAttentionSelectNone, myAttentionCancel, myAttentionLoading, groupSearch, myOrganizationSearchNextPage, myOrganizationSearch } } = this.props;
  let group = groupData || '', AttentionGroup = [];
  const datas = toJS(myorganizationList.data);
  const myAttentionSelectedKeys = toJS(myorganizationList.selectedRowKeys);
  const idSet = myAttentionSelectedKeys.join(',');
  const myAttentionClass = 'blog-center-attention-myAttention-user-list false false false';
  group.forEach(item => {
    let { groupCount, groupName } = item;
    groupName = groupName + '(' + groupCount + ')';
    AttentionGroup.push({value:groupName, label:groupName});
  });
  const getBtn = (type, text) => (
      <div className={`${prefixCls}-user-btns-item`}>
          <Icon type={type} size='xs'/>
          <div>{text}</div>
      </div>
  )
  const getMoveCopy = (key, idSet) => {
    return (
      <Picker
        data={AttentionGroup}
        cols={1}
        disabled={!idSet || idSet === ''}
        onOk={val => this.onOk(val, key, idSet)}
      >
       {key === 1 ? getBtn('blog-yidong', getLabel(-81296,'移动到组')) : getBtn('blog-fuzhi', getLabel(31267,'复制到组'))} 
      </Picker>
    );
  }

  let topStyle ={"top":45};

  if(isSpecial){
      topStyle = {"top":34}
  }

  if(showChecked){
      topStyle = {"top":88}
  }
  if(showChecked&&isSpecial){
      topStyle={"top":44}
  }

  if(!isSpecial&&MyAttentionIsSearch){
      topStyle={"top":0}
  }

 const noData = ()=> {
     return <Result
         style={{"font-size": 14}}
         img={<Icon type="no-data" />}
         message={getLabel(83553, '暂无数据')}
         />
    }

  return (!myAttentionLoading && datas.length === 0 && !groupSearch) ? (
      <div>
          <div style={{"font-size": "12px", "color": "#b1b1b1","padding": "6px 6px"}}></div>
      <div className='blog-noData' style={{"margin-top": "72%"}}>
      {noData()}
      </div></div>) : (
    <div ref='myAttention' className={`${prefixCls}-user`}>
      <div className={myAttentionClass} style={topStyle}>
        {
          myAttentionLoading ? renderLoading : (
            <ListViewPage.Normal
            store={myorganizationList}
            getDataCustom={true}
            getTemplate={this.getTemplate}
            customHeight='100%'
            rowKey='userId'
            showCheck={showChecked}
            onEndReached={MyAttentionIsSearch ? myOrganizationSearchNextPage : null}
            onRefresh={myOrganizationSearch}
          />
          )
        }
        {
          showChecked && (
            <Flex className={`${prefixCls}-user-btns ${myAttentionSelectedKeys.length > 0 && 'active'}`}>
              <Flex.Item>{getMoveCopy(1, idSet)}</Flex.Item>
              <Flex.Item>{getMoveCopy(2, idSet)}</Flex.Item>
              {isSpecial?<Flex.Item  onClick={() => myAttentionSelectedKeys.length > 0 && this.batchCancelSpecial(idSet)}>{getBtn('blog-quxiaoguanzhu',getLabel(514283,'取消特别关注') )}</Flex.Item>:""}
              <Flex.Item onClick={() => myAttentionSelectedKeys.length > 0 && this.cancelAttention(idSet)}>{getBtn('blog-quxiaoguanzhu', getLabel(26938,'取消关注'))}</Flex.Item>
            </Flex>
          )
        }
      </div>
    </div>
  )
}
getTemplate = () => {
  const listStyle = 'blog-list-line';
  const ddd = this.goToUser;
  const newTemp = {
    default: [{
      key: 'col_1',
      render: (data) => {
        const { imageUrl, lastname, departmentName, jobtitle, islower, userId, attentionStatus, isreceive, specialStatus} = data;
        return (
          <div className={listStyle}>
            <div className={`${listStyle}-userInfo`} onClick={() => {
               ddd(userId);
            }}>
              <Avatar userId={userId} style={{width:40, height:40}} />
              <div className={`${listStyle}-userInfo-content`}>
                <span className='lastName text-wrap'>{lastname}</span>
                <span className='departmentName text-wrap'>{departmentName}&nbsp;{jobtitle}</span>
              </div>
            </div>
            <div className={`${listStyle}-ops`}>
              <AttentionTool 
                isreceive={isreceive} 
                attentionStatus={attentionStatus}
                specialStatus={specialStatus}
                userId={userId}
                islower={islower}
                callback={this.updateUserAttentionStatus}
              />
            </div>
             <NewAttentionTool
                 type={'org'}
                 choseTab={this.choseTab}
                 isreceive={isreceive}
                 attentionStatus={attentionStatus}
                 specialStatus={specialStatus}
                 userId={userId}
                 islower={islower}
                 callback={this.updateUserAttentionStatus}
             />
          </div>
        )
      }
    }]
  }
  return newTemp;
}

  renderOrganization = () => {
    const { blogAttentionStore: {MyOrganizationIsSearch }, prefixCls,organizationStore:{treeStore } } = this.props;
    return (
      <div style={{height: '100%',width:'100%'}}>
        {this.getSearchUser()}
        { MyOrganizationIsSearch ? this.pickerContent():
        <Tree
          async
          store={treeStore}
          params={this.state.params}
          onSelect={this.handleSelect}
        />
        }
      </div>
    )
  }




  renderShareToMeBlog = () => {
    const { blogMainStore: { photoSwipePage, search,blogSearchCondition,searchBlog,searchAllBlogBlog, updateAdSearchSubject, searchShareToMeBlog, searchAdValue, setStoreState }, history, prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-main`} style={{top:'0px'}} key='all'>
        {this.getSearchBar()}
        <div className={`${prefixCls}-main-container`}>
          <BlogComment 
            replyClassName="blog-shareToMeBlog"
            path="/blogMain/shareToMe" 
            id="writeShareToMeBlog" 
            replyStore={this.props.blogMainStore} 
            storeName='shareToMe' 
            photoSwipePage={photoSwipePage}
            avatarClick={(data)=>this.setState({id: data.id},()=>{
              this.props.history.push(`/blogMain/shareToMe/hisBlog/${data.id}`)
            })}
          />
        </div>
      </div>
    )
  }

  renderAllBlog = () =>{
    const { blogMainStore: { photoSwipePage, search,blogSearchCondition,searchBlog,searchAllBlogBlog, updateAdSearchSubject, searchShareToMeBlog, searchAdValue, setStoreState }, history, prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-main`} style={{top:'0px'}} key='all'>
        {this.getSearchBar()}
        <div className={`${prefixCls}-main-container`}>
          <BlogComment 
            replyClassName="blog-allBlog"
            path="/blogMain/allBlog" 
            id="writeAllBlog" 
            replyStore={this.props.blogMainStore} 
            storeName='allBlog'
            photoSwipePage={photoSwipePage}
            avatarClick={(data)=>this.setState({id: data.id},()=>{
              this.props.history.push(`/blogMain/allBlog/hisBlog/${data.id}`)
            })}
          />
        </div>
      </div>
    )
  }

  renderUnread = () => {
    const { blogMainStore: { photoSwipePage }, prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-main`} style={{top:'0px'}} key='unread'>
       {this.getSearchBar()}
        <BlogComment 
          path='/blogMain/unread' 
          id="writeUnread" 
          replyClassName="blog-unReadBlog"
          replyStore={this.props.blogMainStore} 
          storeName='unreadBlog' 
          photoSwipePage={photoSwipePage}
          avatarClick={(data)=>this.setState({id: data.id},()=>{
            this.props.history.push(`/blogMain/unread/hisBlog/${data.id}`)
          })}
        />
      </div>
    )
  }


    renderSpecial = () => {
        const { blogMainStore: { photoSwipePage }, prefixCls } = this.props;
        return (
            <div className={`${prefixCls}-main`} style={{top:'0px'}} key='special'>
                {this.getSearchBar()}
                <div className={`${prefixCls}-main-container`}>
                <BlogComment
                    path='/blogMain/special'
                    replyClassName="blog-specialBlog"
                    id="speicalBlog"
                    replyStore={this.props.blogMainStore}
                    storeName='specialBlog'
                    photoSwipePage={photoSwipePage}
                    avatarClick={(data)=>this.setState({id: data.id},()=>{
                        this.props.history.push(`/blogMain/unread/hisBlog/${data.id}`)
                    })}
                />
                </div>
            </div>
        )
    }



  render() {
    const { prefixCls, blogMainStore: { searchAdValue, photoSwipePage }, userCenterStore: { menuCountData } } = this.props;
    const tabs = [
      //getLabel(384389,'取消特别关注')
        { title: getLabel(384389,'全部关注'), sub: '1'},
        { title: getLabel(33847,'未读微博') , sub: '2' },
        { title: getLabel(514285,'特别关注') , sub: '3' },
        { title: getLabel(513653,'分享给我') , sub: '4' },
        { title: getLabel(25332,'组织结构'), sub: '5' },
      
    ];
    let tabBarUnderlineStyle = {};
    if(this.state.page==5 && this.isAllSerach){
      tabs.push({ title: "" , sub: '6' })
      tabBarUnderlineStyle = {display:'none'};
    }
    // 
    //overflow-y: hidden;
    //overflow: scroll;
    return (
      <div className={prefixCls} >
         <Tabs tabs={tabs}
          initialPage={0}
          page={this.state.page}
          onTabClick={this.changeTab}
          swipeable={false}
          useOnPan={false}
          tabBarUnderlineStyle = {tabBarUnderlineStyle}
          renderTabBar={props => <Tabs.ExpandTabBar {...props} />}
        > 
          <div>
             {this.state.page==0?this.renderBlog():""}}
          </div>
          <div >
                {this.state.page==1?this.renderUnread():""}
          </div>
          <div >
               {this.state.page==2?this.renderSpecial():""}
          </div>
          <div >
               {this.state.page==3?this.renderShareToMeBlog():""}
          </div>
          <div className="wm-comment-nodata" >
               {this.state.page==4?this.renderOrganization():""}
          </div>
          { (this.state.page==5 && this.isAllSerach)? <div >
              {this.renderAllBlog()}
          </div>:""}
        </Tabs>
      </div>
    );
  }
}


